<template>
  <div id="pieCharts3" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: '',
  props: ['pieData', 'legendShow', 'radius', 'center'],
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.init()
  },
  created() {},
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      if (this.myChart) {
        this.myChart.dispose()
      }
      this.myChart = echarts.init(document.getElementById('pieCharts3'))
      var total = this.pieData.reduce((accumulator, currentValue) => {
        return accumulator + currentValue.value
      }, 0)
      this.myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            // 使用外部变量total
            return params.name + '：' + params.percent + ' %  总数：' + total
          }
        },
        legend: {
          show: true,
          orient: 'vertical', //图例垂直
          right: '6%',
          top: '15%',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            type: 'pie',
            radius: '70%',
            center: ['35%', '43%'],
            data: this.pieData,
            roseType: 'radius',
            itemStyle: {
              borderRadius: 5
            },
            label: {
              normal: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
      // window.onresize = function () {
      //   this.myChart.resize()
      // }
    }
  }
}
</script>
<style></style>